<template>
  <div id="app">
    <router-view />
    <div class="drag" @touchmove="move" @click="toCustmoer" v-if="flag"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    }
  },
  methods: {
    move(e) {
      console.log(e);
      var x = e.touches[0].clientX;
      var y = e.touches[0].clientY;
      if (x > 50 && x < document.body.clientWidth - 50 && y > 50 &&y<document.body.clientHeight-100){
         var drag=document.getElementById("drag")
         drag.style.top=y-50+'px';
         drag.style.left=x-50+'px'
      }
    },
    toCustmoer(){
      this.$router.push("/custmoer")
    }
  },
  watch:{
    $route(n){
     console.log(n.path);
      if (n.path =="/custmoer"){
        this.flag=false
      }else{
        this.flag=true
      }
    }
  }
}
</script>

<style lang="scss">
#app {
  min-height: 100vh;
}

* {
  margin: 0;
  padding: 0;
}

#drag {
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 50%;
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 100;
}
</style>
